import {  Table,Button,Flex,Input} from 'antd';
import {columnsData} from './columns'
import { PlusOutlined} from '@ant-design/icons';
import {getUserData,getDeleteUser} from "../../api";
import './index.css'
import {useEffect, useState} from "react";
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
const {Search}  = Input
const User = ()=>{
    const [userData, setUserData] = useState<DataType[]>([]);
    useEffect(()=>{
        let params:any = {
            page:1,
            limit:20,
            name:[]
        }
        getUserData(params).then(({data})=>{
            const {list} = data;
            setUserData(list)
        })
    })

    return (
        <div className='user-container'>
            <Flex justify={'space-between'}>
                <Button type="primary" style={{display:'flex', justifyContent:"space-around",alignItems: 'center'}}>
                        <div>
                            <PlusOutlined />
                        </div>
                        <div>
                            新增
                        </div>
                </Button>
                <Search
                    placeholder="请输入用户名"
                    enterButton="搜索"
                    size="large"
                    style={{ width: 300 }}
                />
            </Flex>
            <Table<DataType> columns={columnsData} style={{marginTop:'20px'}} dataSource={userData} />

        </div>
    )
}
export default User